<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue全家桶_stu/03_依赖包/vue.js"></script>
</head>

<body>
    <div id="root">
        <p>你的姓是<input type="text" v-model="xing"></p>
        <p>你的名是<input type="text" v-model="ming"></p>
        <p>你的名字是{{allName}}</p>
        <p>你的名字是{{allName}}</p>
        <p>你的名字是{{allName}}</p>
        <p>你的名字是{{allName}}</p>
        <p>你的名字是{{allName}}</p>
        <!-- 多次读取allName属性 计算属性方法只执行一次  缓存机制(多次读取显示只计算一次) -->
        <p>你的名字是2 :{{allName2}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    xing: '',
                    ming: ''
                }
            },
            //计算属性(不支持异步，有缓存机制)
            //对已有的属性进行计算
            //当依赖的响应式数据发生变化时，计算的属性会重新执行
            computed: {
                //函数写法
                allName() {
                    //不支持异步
                    //返回的值即为计算属性allName的属性值
                    console.log('执行次数')
                    return this.xing + this.ming
                },
                //对象写法
                allName2: {
                    //读取allName2时触发
                    get() {
                        //返回的值即为计算属性allName2的属性值
                        return this.xing + this.ming
                    },
                    //修改allname2时触发
                    set(value){
                        return value
                    }
                }
            }
            //computed 底层是通过Object.defineProperty()方法实现的
        })
    </script>
</body>

</html>